<template>
  <div class="mx-auto mb-8">
    <nav>
      <ul class="list-style-none flex justify-center">
        <li
          v-for="page in pages"
          :key="page"
        >
          <a
            @click.prevent="handler(page)"
            class="relative block rounded bg-transparent px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
            href="#"
            >{{ page }}</a
          >
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    pages: {
      type: Number,
    },
  });
  const emit = defineEmits(["setPage"]);
  const { pages } = toRefs(props);
  const handler = (page: number) => {
    emit("setPage", page);
  };
</script>

<style scoped></style>
